<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子健康码</title>
    <link rel="stylesheet" href="../styles.css">
    <link rel="stylesheet" href="health_code.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <button class="back-btn" onclick="window.location.href='/demo/index/index.html'">
                <i class="fas fa-arrow-left"></i>
            </button>  <!-- 加上这个闭合标签 -->
            <h1>电子健康码</h1>
        </div>


        <!-- 健康码区域 -->
        <div class="health-code-container">
            <div class="code-card">
                <div class="user-info">
                    <div class="avatar">
                        <i class="fas fa-user-circle"></i>
                    </div>
                    <div class="info">
                        <h2>张三</h2>
                        <p class="phone">138****8888</p>
                    </div>
                </div>
                <div class="qr-code" id="qrCode">
                    <!-- 二维码将通过 JS 生成 -->
                </div>
                <div class="code-status">
                    <div class="status-text">健康状态：正常</div>
                    <div class="update-time">更新时间：<span id="updateTime"></span></div>
                </div>
                <div class="refresh-btn" onclick="refreshCode()">
                    <i class="fas fa-sync-alt"></i>
                    <span>点击刷新</span>
                </div>
            </div>
        </div>

        <!-- 注意事项 -->
        <div class="notice-section">
            <h3>使用说明</h3>
            <div class="notice-list">
                <div class="notice-item">
                    <i class="fas fa-info-circle"></i>
                    <span>请保持手机网络通畅</span>
                </div>
                <div class="notice-item">
                    <i class="fas fa-info-circle"></i>
                    <span>进入公共场所请主动出示</span>
                </div>
                <div class="notice-item">
                    <i class="fas fa-info-circle"></i>
                    <span>定期更新个人健康信息</span>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <div class="nav-item" onclick="window.location.href='../index.html'">
                <i class="fas fa-hospital"></i>
                <span>医疗</span>
            </div>
            <div class="nav-item" onclick="window.location.href='../knowledge.html'">
                <i class="fas fa-book-medical"></i>
                <span>知识</span>
            </div>
            <div class="nav-item" onclick="window.location.href='../records.html'">
                <i class="fas fa-heart"></i>
                <span>档案</span>
            </div>
            <div class="nav-item" onclick="window.location.href='../profile/profile.html'">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </nav>
    </div>
    <script src="health_code.js"></script>
</body>
</html> 